<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>2_Vue.extend()的简写方式</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="demo"></div>
    </body>

    <script type="text/javascript">

        Vue.config.productionTip = false;

        const School = {
            template:`
                <div>
                    <h2>学校名称: {{name}}</h2>    
                    <h2>学校地址: {{address}}</h2>    
                    <button @click="showMore">展示更多信息</button>
                </div>
            `,
            data(){
                return{
                    name: '尚硅谷',
                    address: '宏福科技园',
                    tel: '010-56253825',
                    city: '北京'
                }
            },
            methods: {
                showMore(){
                    alert(`所在城市: ${this.city}------联系电话: ${this.tel}`)
                }
            }
        }

        const Student = {
            template:`
                <div>
                    <h2>学生姓名: {{name}}</h2>
                    <h2>学生年龄: {{age}}</h2>
                    <button @click="showMore">展示更多信息</button>
                </div>
            `,
            data(){
                return{
                    name: '张三',
                    age: '18',
                    gender: '男',
                    subject: '前端'
                }
            },
            methods: {
                showMore(){
                    alert(`学生性别: ${this.gender}------所学专业: ${this.subject}`)
                }
            }
        }

        const App = {
            name: 'App',
            components: {School, Student},
            template: `
                <div>
                    <School/>
                    <hr>
                    <Student/>    
                </div>
            `,
        }

        new Vue({
            el: '#demo',
            components: {App},
            template: '<App/>'
        })
        
    </script>
</html>